<template>
    <ul class="left-menu">
        <li :class="['menu-item', { active: curType === item.type }]" v-for="(item, index) in menu" :key="index" @click="selectMenu(item)">
            {{ item.name }}
        </li>
    </ul>
</template>

<script>
export default {
    props: {
        curType: {
            type: String,
            default: ''
        }
    },
    model: {
        prop: 'curType',
        event: 'change'
    },
    data() {
        return {
            menu: [
                // {
                //   name: "创建图层",
                //   type: "1",
                // },
                {
                    name: '控制图层',
                    type: '2'
                },
                {
                    name: '操作图层',
                    type: '3'
                }
                // {
                //   name: "导航",
                //   type: "4",
                // },
            ]
        }
    },
    methods: {
        selectMenu(item) {
            this.$emit('change', item.type)
        }
    }
}
</script>

<style scoped lang="less">
.left-menu {
    width: 100%;
    height: 100%;

    .menu-item {
        display: flex;
        width: 100%;
        height: 40px;
        cursor: pointer;
        justify-content: center;
        align-items: center;

        &.active {
            background: #5af;
        }
    }
}
</style>
